<template>
  <div>
    <div class="main">
      <div class="m-header">
        <div class="left">
          <h3 style="margin: 15px">机构概述</h3>
          <div style="margin-left: 25px">
            <h4>{{ organOverview.organName }}</h4>
            <p>地址：{{ organOverview.organAddress }}</p>
            <p>
              负责人：{{ organOverview.principal }} {{ organOverview.phone }}
            </p>
            <el-button
              style="margin-left: 60px; margin-top: 12px"
              plain
              type="primary"
              size="medium"
              >查看营业部分布</el-button
            >
          </div>
        </div>
        <div class="right-one">
          <div class="right">
            <div class="one">
              <h4 style="font-weight: normal; margin: 0; text-align: center">
                分拣中心(个)
              </h4>
              <p>{{ organOverview.sortingCenterNumber }}</p>
            </div>
            <div class="one">
              <h4 style="font-weight: normal; margin: 0; text-align: center">
                营业部(个)
              </h4>
              <p>{{ organOverview.agencyNumber }}</p>
            </div>
          </div>
          <div class="right">
            <div class="one">
              <h4 style="font-weight: normal; margin: 0; text-align: center">
                司机人数(个)
              </h4>
              <p>{{ organOverview.driverNumber }}</p>
            </div>
            <div class="one">
              <h4 style="font-weight: normal; margin: 0; text-align: center">
                快递员人数(个)
              </h4>
              <p>{{ organOverview.courierNumber }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="m-main">
        <div style="height: 80px" class="top">
          <h3 style="margin: 0; line-height: 80px; margin-left: 30px">
            今日数据
          </h3>
          <div style="line-height: 80px">
            <img
              src=""
              style="width: 15px"
            />
            <span style="margin-right: 20px">{{
              time | formatDate("'yyyy-M-d H:m:s'")
            }}</span>
          </div>
        </div>
        <div class="bottom">
          <div class="one">
            <p>订单价格(元)</p>
            <h1>{{ todayData.orderAmount }}</h1>
            <p>
              较昨日
              <span
                >+{{ todayData.orderAmountChanges }}
                <img
                  style="width: 18px; line-height: 27px"
                  src=""
                />
              </span>
            </p>
          </div>
          <div class="one">
            <p>订单数量(笔)</p>
            <h1>{{ todayData.orderNumber }}</h1>
            <p>
              较昨日
              <span
                >+{{ todayData.orderNumberChanges }}
                <img
                  style="width: 18px; line-height: 27px"
                  src=""
                />
              </span>
            </p>
          </div>
          <div class="one">
            <p>运输任务(次)</p>
            <h1>{{ todayData.transportTaskNumber }}</h1>
            <p>
              较昨日
              <span
                >+{{ todayData.transportTaskNumberChanges }}
                <img
                  style="width: 18px; line-height: 27px"
                  src=""
                />
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="m-header"></div>
      <div class="m-main"></div>
    </div>
  </div>
</template>

<script>
import { getWorkDateApi } from "@/api/workTai";

export default {
  created() {
    this.getWorkDateInfo();
  },
  data() {
    return {
      time: new Date(),
      organOverview: {},
      todayData: {},
    };
  },
  filters: {
    formatDate: function (value, args) {
      var dt = new Date(value);
      if (args == "yyyy-M-d") {
        // yyyy-M-d
        let year = dt.getFullYear();
        let month = dt.getMonth() + 1;
        let date = dt.getDate();
        return `${year}-${month}-${date}`;
      } else if (args == "yyyy-M-d H:m:s") {
        // yyyy-M-d H:m:s
        let year = dt.getFullYear();
        let month = dt.getMonth() + 1;
        let date = dt.getDate();
        let hour = dt.getHours();
        let minute = dt.getMinutes();
        let second = dt.getSeconds();
        return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
      } else if (args == "yyyy-MM-dd") {
        // yyyy-MM-dd
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2, "0");
        let date = dt.getDate().toString().padStart(2, "0");
        return `${year}-${month}-${date}`;
      } else {
        // yyyy-MM-dd HH:mm:ss
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2, "0");
        let date = dt.getDate().toString().padStart(2, "0");
        let hour = dt.getHours().toString().padStart(2, "0");
        let minute = dt.getMinutes().toString().padStart(2, "0");
        let second = dt.getSeconds().toString().padStart(2, "0");
        return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
      }
    },
  },
  methods: {
    async getWorkDateInfo() {
      const res = await getWorkDateApi();
      console.log(res.data.data);
      this.organOverview = res.data.data.organOverview;
      this.todayData = res.data.data.todayData;
    },
  },
};
</script>

<style lang="scss">
.main {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  .m-header {
    display: flex;
    width: 720px;
    height: 300px;
    border-radius: 8px;
    background-color: white;
    .left {
      margin-top: 15px;
      width: 360px;
      height: 240px;
      border-right: 1px solid #ccc;
      h4 {
        font-weight: normal;
      }
      p {
        color: rgb(157, 134, 147);
      }
    }
    .right-one {
      .right {
        margin: 50px 0;
        height: 80px;
        display: flex;
        justify-content: space-around;
        .one {
          width: 200px;
          height: 80px;
          p {
            text-align: center;
            margin: 0;
            font-size: 30px;
            color: rgb(225, 85, 54);
          }
        }
      }
    }
  }
  .m-main {
    border-radius: 8px;
    width: 550px;
    height: 300px;
    background-color: white;
    .top {
      display: flex;
      justify-content: space-between;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      .one:first-child {
        margin-left: 40px;
      }
      .one {
        margin-right: 40px;
        text-align: center;
        span {
          color: rgb(129, 134, 147);
        }
      }
    }
  }
}
</style>
